<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/* 1.控制字体：font-family指定字体家族属性 */
			{
				/* 免费：微软雅黑、楷体、sans-serif'无衬线字体'等同于黑体、宋体... */
				font-family: 微软雅黑,sans-serif;
				/* 用户电脑存在字体，按照顺序选择执行，二选一，就近原则 */
				/* font-size字体尺寸属性：px 绝对值--PC  em：相对于父元素字体倍速调整--移动端 */
				font-size: 1.5em;
				/* font-weight字体加粗属性  属性值：数值【整数】   100 细~900 醋
				                                  英文      normal=400、bold=900*/
			   font-weight: 900;
			   /* font-style字体样式属性 */
			   font-style: italic;
			   /* text-transform字体转换属性:属性值 uppercase  转大写 
			                                      lowercase  转小写
												  capitalize 首字符转大写
			   */
			   text-transform: uppercase;
			   text-transform: lowercase;
			   text-transform: capitalize;
			   /* text-indent 文本块首行缩进属性：属性值 数值px */
			   text-indent: 200px;
			}
			/* 2.控制文本布局 */
			h1+p{
				bor der: 1px solid red;
				/* text-again文本对齐属性：属性值：left|right|center[空间高度]
				                                 justify  两端对齐[文本占满空间]
				左右布局 */
				text-align: center;
				text-align: justify;
				/* line-height行高属性：属性值:数值px 针对文本行高,文本垂直居中 */
				height: 40px;
				line-height: 40px;
				/* 文本垂直居中：高度与行高一致 */
				/* letter-spacing字符间距属性：属性值 [正负]数值px*/
				letter-spacing: -1px;
				
				/* word-spacing单词间距属性：属性值 [正负]数值px */
				word-spacing: 10px;
			}
			/* 文本修饰效果 */
			p a{
				border: 1px solid #6f6f6f;
				padding: 6px 10px;
				border-radius: 3px;
				margin-left: 10px;
			}
			/* 默认效果：去边框、下划线 */
			p a.current{
				border: 0;
				/* text-decoration超链接效果属性  none         去掉下划线 
				                                underline    默认有下划线
												line-through 删除线
				*/
				text-decoration: none;
				text-decoration: underline;
				text-decoration: line-through;
				color: #000;
			}
			p>span{
				bor der: 1px solid red;
				/* text-show文本阴影属性      阴影：①滤镜：下阴影②文本阴影③盒子阴影 */
				/*      属性值：X Y 模糊距离 颜色      */
				text-shadow: 5px 5px 10px #ff5c2a;
			}
			/* 4.文本换行属性 */
			h1~span{
				border: 1px solid red;
				/* white-space文本换行属性：nowrap 一行显示 ，添加回车，显示效果:存在空格
				                          pre     保留空格与回车
										  normal  默认 空格合并, 自动换行
				*/
				whi te-space: nowrap;
				whi te-space: pre;
				white-space: normal;
			}
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：针对文本和字体，四种结果： 
		     ①控制字体：font-family、font-size、font-weighr等
			 ②控制文本布局：text-align、line-height、letter-spacing等
			 ③文本装饰效果：text-decoration、text-shadow等
			 ④文本溢出和换行：overflow、white-space.
		-->
		<h1>文本格式化属性：控制字体</h1>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quam sapiente totam ratione consequuntur, eius esse maiores consectetur necessitatibus labore animi illo. Esse optio ipsum, mollitia et deserunt doloremque quibusdam.
		<h1>控制文本布局:文本</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo, et velit at exercitationem dolorum in, ad dolores possimus reiciendis sapiente corrupti sunt corporis nemo aspernatur veritatis! Facilis, natus vel!</p>
		<h1>文本装饰效果</h1>
		<p>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<span>测试文本阴影</span>
		</p>
		<h1>文本换行属性</h1>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto reprehenderit voluptatem quas. Iusto dicta error eius illum dolorum accusamus, ut veniam pariatur vel optio perferendis dolor nisi in, consequuntur minima.</span>
	</body>
</html>